<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记详情 - 笔记系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        tailwind.config = { theme: { extend: { colors: { primary: '#4F46E5', secondary: '#F5F5F7', neutral: '#1F2937' }}}};
    </script>
</head>
<body class="bg-secondary min-h-screen">
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-book text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-neutral">笔记详情</h1>
        </div>
        <a href="note.html" class="text-primary">返回列表</a>
    </div>
    </header>

<main class="container mx-auto px-4 py-8 max-w-3xl">
    <div id="loading" class="py-12 text-center">
        <i class="fa fa-spinner fa-spin text-primary text-2xl mb-2"></i>
        <p class="text-neutral/70">加载中...</p>
    </div>

    <div id="content" class="hidden">
        <h2 id="title" class="text-2xl font-bold text-neutral mb-3"></h2>
        <div class="text-sm text-neutral/50 mb-6">
            <span id="times"></span>
        </div>
        <article id="body" class="bg-white rounded-lg shadow-sm p-5 text-neutral leading-7 whitespace-pre-wrap"></article>
        <div class="mt-6 flex gap-3">
            <a id="editLink" href="#" class="px-4 py-2 rounded bg-primary text-white hover:bg-primary/90">编辑</a>
            <a href="note.html" class="px-4 py-2 rounded border border-gray-300 text-neutral hover:bg-gray-50">返回</a>
        </div>
    </div>
</main>

<script>
    const CURRENT_USER_ID = 1;
    const params = new URLSearchParams(location.search);
    const id = parseInt(params.get('id')) || null;

    document.addEventListener('DOMContentLoaded', () => {
        if (!id) {
            alert('缺少笔记ID');
            location.href = 'note.html';
            return;
        }
        axios.get('/notes/detail', { params: { id, userId: CURRENT_USER_ID } })
            .then(res => {
                const n = res.data;
                if (!n || n.success === false) throw new Error('not_found');
                document.getElementById('title').textContent = n.title || '(未命名)';
                document.getElementById('times').textContent = `创建于: ${n.createTime || ''} • 更新于: ${n.updateTime || ''}`;
                document.getElementById('body').textContent = n.content || '';
                document.getElementById('editLink').href = `note-edit.html?id=${n.id}`;
                document.getElementById('loading').classList.add('hidden');
                document.getElementById('content').classList.remove('hidden');
            })
            .catch(err => {
                console.error('详情加载失败', err);
                alert('笔记不存在或已删除');
                location.href = 'note.html';
            });
    });
</script>
</body>
</html>